<template>
  <div class="login">
    <!-- 左侧区域 -->
    <div class="left-content">
      <!-- title/logo -->
      <div class="title">
        <img src="@/assets/logo.webp" alt="" />
        <div class="header">RCBA Admin Ele</div>
      </div>
      <!-- 居中展示 -->
      <div class="center">
        <img src="@/assets/login.png" alt="" />
        <div class="desc">基于角色权限的学生管理系统</div>
      </div>
    </div>
    <!-- 右侧区域 -->
    <div class="right-content">
      <div class="login-form">
        <h1>欢迎回来 👋🏻</h1>
        <div class="login-desc">请输入您的账户信息来开始使用本系统!</div>
        <!-- 表单 -->
        <!-- model 表单依赖的数据对象， rules: 定义表单验证规则 -->
        <el-form :model="userForm" :rules="userFormRules" ref="userFormEle">
          <el-form-item prop="username">
            <el-input
              placeholder="请输入用户名"
              v-model="userForm.username"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              type="password"
              placeholder="请输入密码"
              v-model="userForm.password"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="width: 100%" @click="login"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { LoginForm } from "@/types/user"
import { reactive, ref } from "vue"
import { ElMessage, type FormInstance, type FormRules } from "element-plus"
import { useUserStore } from "@/store/useUserStore"
import { useRouter } from "vue-router"
const router = useRouter()
const store = useUserStore()
const { loginFn } = store

const userForm = reactive<LoginForm>({
  username: "",
  password: "",
})

// 定义rules 定义表单验证规则对象
const userFormRules = reactive<FormRules<LoginForm>>({
  username: [
    { required: true, message: "请输入用户名", trigger: "blur" },
    {
      max: 12,
      min: 4,
      message: "长度为4到12位",
      trigger: ["blur"],
    },
    // 只能是数字，字母
    {
      pattern: /^[a-zA-Z0-9]+$/,
      message: "用户名只能由大小写字母以及数字构成",
      trigger: ["change", "blur"],
    },
  ],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
})

// 获取表单元素
const userFormEle = ref<FormInstance>()
// this.$refs.userFormEle

// 登录方法
const login = function () {
  // 最终的表单验证
  // 拿到表单元素
  // 调用表单元素的验证方法
  if (!userFormEle) return //   console.log(userFormEle)
  ;(userFormEle.value as FormInstance).validate(async (valid, fields) => {
    console.log(valid)
    if (valid) {
      // console.log("登录")
      try {
        const msg = await loginFn(userForm) // Promise对象 成功：
        ElMessage({
          type: "success",
          message: msg,
        })
        router.push("/")
      } catch (error) {
        // Promise对象：失败：
        ElMessage({
          type: "error",
          message: error as string,
        })
      }
      //   console.log(userForm.password, userForm.username)
    } else {
      // console.log("error submit!", fields)
      alert("error submit")
    }
  })
}
</script>

<style scoped>
/* right-content-start */
.right-content {
  flex: 1;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.login-form {
  width: 90%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.login-desc {
  color: #ccc;
  font-size: 12px;
}
/* ----right-content-end--- */
/* ------left-content----end */
.login {
  display: flex;
  height: 100vh;
}
.left-content {
  /* flex-grow: 2; */
  flex: 2;
  background-color: rgb(241, 243, 246);
  display: flex;
  justify-content: center;
  align-items: center;
}

.title {
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: 500;
  position: absolute;
  top: 20px;
  left: 20px;
  /* margin-left: 20px;
  margin-top: 20px; */
}
.title img {
  /* 定宽不定高 */
  width: 45px;
}
.center {
  /* width: 200px;
    height: 200px; */
  /* background-color: skyblue; */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.center img {
  width: 270px;
  animation: up-down 2s infinite alternate;
}
@keyframes up-down {
  0% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(20px);
  }
}
.desc {
  font-size: 32px;
}
/* left-content-end */
</style>
